<template>
  <div>
    <el-table style="width: 100 %;" border :data="tableData">
      <el-table-column label="Id" prop="id">
        <template slot-scope="scope">
          <span style="margin-left: 10px;">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户名" prop="name">
        <template slot-scope="scope">
          <span style="margin-left: 10px;">{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span style="margin-left: 10px;">{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注">
        <template slot-scope="scope">
          <span style="margin-left: 10px;">{{ scope.row.remarks }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center">
        <template slot="header">
          <el-input
            size="mini"
            placeholder="输入关键字搜索"
            style="width: 160px;"
            align="left"
          />
          <el-button
            type="primary"
            style="
              height: 28px;
              width: 56px;
              margin: 0px 0px 0px 10px;
              padding: 0;
            "
            @click="handleAdd"
          >
            新增
          </el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 10px;">
      <el-pagination
        @size-change="handlePagerSizeChange"
        @current-change="handlePagerIndexChange"
        :current-page="pager.pagerIndex"
        :page-size="pager.pagerSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
      ></el-pagination>

      <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
        <el-form :model="formData">
          <el-form-item label="用户名" label-width="120px">
            <el-input v-model="formData.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="120px">
            <el-input v-model="formData.remarks" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { addUser, delUser, getList, modUser } from '../api/users'
export default {
  data() {
    return {
      tableData: [],
      pager: {
        pagerIndex: 1,
        pagerSize: 10,
        rowsTotal: 30,
      },
      formData: {
        id: 0,
        username: '',
        password: '123456',
        remarks: '',
      },
      currentIndex: 0,
      dialogFormVisible: false,
    }
  },
  methods: {
    handleAdd() {
      this.dialogFormVisible = true
      this.formData.id = 0
      this.formData.username = ''
      this.formData.remarks = ''
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true
      this.formData.id = row.id
      this.formData.username = row.username
      this.formData.remarks = row.remarks
      this.currentIndex = index
    },
    handleDelete(index, row) {
      delUser(row.id).then(() => {
        this.tableData.splice(index, 1)
        this.pager.rowsTotal -= 1
        let nun = parseInt(this.pager.rowsTotal / this.pager.pagerSize) + 1
        if (
          parseInt(this.pager.rowsTotal % this.pager.pagerSize) === 0 &&
          this.pager.pagerIndex === nun
        ) {
          this.pager.pagerIndex -= 1
        }
        if (this.pager.pagerIndex <= 0) {
          this.pager.pagerIndex = 1
        }
        this.fetchData(this.pager)
      })
    },
    handleSave() {
      this.dialogFormVisible = false

      if (this.formData.id === 0) {
        addUser(this.formData).then(({ data }) => {
          this.tableData.push(data.data)
          let nun = parseInt(this.pager.rowsTotal / this.pager.pagerSize) + 1
          this.pager.rowsTotal += 1
          console.log(nun)
          this.pager.pagerIndex = nun
          this.fetchData(this.pager)
        })
      } else {
        modUser(this.formData.id, this.formData).then(({ data }) => {
          this.tableData.splice(this.currentIndex, 1, data.data)
        })
      }
    },
    handleCancel() {
      this.dialogFormVisible = false
    },
    handlePagerIndexChange(val) {
      this.pager.pagerIndex = val
      this.fetchData(this.pager)
    },
    handlePagerSizeChange(val) {
      this.pager.pagerSize = val
      this.fetchData(this.pager)
    },
    fetchData(pager) {
      getList(pager)
        .then(({ data }) => {
          let res = data.data
          this.pager = res.pager
          this.tableData = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  mounted() {
    this.fetchData(this.pager)
  },
}
</script>
